<template>
	<div style="width: 100%;overflow: auto;" :style="componentModel.cssStyle">
		<h3>{{componentModel.title}}</h3>
		<table cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
			<tr v-for="(row,rowIndex) in summaryReportRowList" :key="rowIndex">
				<td v-for="(cell,colIndex) in row.summaryReportCellList" :key="colIndex" style="min-width:100px;border:1px solid #ddd;" :rowspan="cell.rowspan" :colspan="cell.colspan" :style="{display:[cell.display?'':'none']}">{{cell.value}}</td>
			</tr>
		</table>
	</div>
</template>

<script>
	import utils from '@/utils/utils.js';
	
	export default {
		name: "DetailReportComponent",
		props: ["previewMode","componentModel"],
		data() {
			return {
				summaryReportRowList:[],
			}
		},inject:['children'],
		mounted() {
			this.children.push(this);
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			setProp(prop){
				var summaryReportModel=prop["summaryReportModel"];
				if(summaryReportModel!=undefined){
					this.summaryReportRowList = summaryReportModel.summaryReportRowList;
				}else if(summaryReportModel==null){
					this.summaryReportRowList = [];
				}
			},setSummaryReportModel(summaryReportModel){
				this.summaryReportRowList = summaryReportModel.summaryReportRowList;
			}
		}
	}
</script>

<style>
</style>
